<template>
  <t-dialog
    :header="header"
    :visible.sync="visible"
    :onClose="closeDialog"
    :closeOnOverlayClick="false"
    @confirm="onSubmit"
    :confirmBtn="{
        content: loading?'提交中...':'确认',
        theme: 'primary',
        loading: loading,
      }"
    width="80%"
    top="5%"
  >
    <div style="height: 65vh">
      <t-form ref="form" :colon="true" labelAlign="top" :data="formData" labelWidth="100px" :rules="rules">
        <t-form-item label="所属年度" name="year">
          <t-date-picker v-model="formData.year" mode="year" clearable/>
        </t-form-item>
        <t-form-item label="归口单位列表" name="departmentQuotas">
            <t-table
              rowKey="id"
              :data="formData.departmentQuotas"
              :columns="columns"
              hover
              :loading="dataLoading"
            >
              <template #index="{ rowIndex }">
                {{rowIndex+1}}
              </template >
              <template #quota="{row}">
                <t-input-number style="width: 240px" :allowInputOverLimit="false" :defaultValue="0" clearable :min="0" v-model="row.quota"/>
              </template>
              <template #footerSummary>
                <div class="t-table__row-filter-inner">已分配名额：{{totalQuota}}</div>
              </template>
            </t-table>

        </t-form-item>
      </t-form>
    </div>
  </t-dialog>
</template>

<script lang="jsx">
import dayjs from 'dayjs';

export default {
  name: "add-edit-year-unit-quota",
  components: {
  },
  props: ["header", "objId","total"],
  data() {
    return {
      loading: false,
      deptOptions: [],
      dialog:{
        open:false,
        objId:0,
        obj:null,
      },
      visible: true,
      data:[],
      totalQuota: 0,
      columns: [
        // {
        //   colKey: 'row-select',
        //   type: 'single',
        //   title: "选择",
        //   width: 64,
        //   foot: () => <div style="text-align: center">合计</div>,
        // },
        {
          colKey: 'index',
          title: "序号",
          align: "center",
          width: 80
        },
        {
          colKey: "departmentName",
          title: "单位名称",
          align: "center",
          ellipsis: true
        },
        {
          colKey: "quota",
          title: "名额",
          align: "center",
          foot: 't-foot-total',
        },
        // {
        //   colKey: "op",
        //   title: "操作",
        //   align: "center",
        //   ellipsis: true
        // },
      ],
      dataLoading:false,
      formData: {
        // departmentId: null,
        year: dayjs().year().toString(),
        // quota: 0,
        // sort: this.total+1,
        // departmentName:'',
        departmentQuotas:[]
      },
      rules: {
        departmentId: [{required: true, message: "归口单位不能为空"}],
        year: [{required: true, message: "所属年度不能为空"}],
      }
    }
  },
  watch: {
    objId: {
      immediate: true,
      handler(val) {
        if (val) {
          this.getObj();
        }
      }
    },
    "formData.departmentQuotas":{
      immediate: true,
      deep: true,
      handler(val) {
        // 计算总数
        let total = 0
        this.formData.departmentQuotas.forEach(val=>{
          total += val.quota
        })
        this.totalQuota = total;
      }
    }
  },
  created() {
    if(!this.objId){
      this.getManagementList();
    }
  },
  methods: {
    getManagementList(){
      this.$api.system.dept.getManagementList().then((res) => {
        this.formData.departmentQuotas = res.data.map((val,index)=>{
          return {
            departmentName: val.deptName,
            departmentId: val.id,
            quota: 0
          }
        });
      }).catch((e) => {
        this.$message.error(e.toString());
      });
    },
    onUnitChange(val,content,row){
      row.departmentName = content.node.data.label;
      // this.formData.departmentName = content.node.data.label;
    },
    getObj() {
      this.$api.wcx.config.unitYearQuotaGet(this.objId).then((response) => {
        this.formData = response.data;
      });
    },
    onSubmit() {
      this.$refs.form.validate().then((validateResult) => {
        if (validateResult === true) {
          this.formData.departmentQuotas.forEach((val,index)=>{
            this.formData.departmentQuotas[index].sort = index + 1;
          })
          this.loading = true;
          if (this.objId) {
            this.$api.wcx.config.unitYearQuotaUpdate(this.formData).then((response) => {
              this.loading = false;
              this.$message.success("修改成功");
              this.$emit("reload");
              this.$emit("update:visible", false);
            }).catch((e) => {
              this.loading = false;
              this.$message.error(e.toString());
            });
          } else {
            this.$api.wcx.config.unitYearQuotaAdd(this.formData).then((response) => {
              this.loading = false;
              this.$message.success("新增成功");
              this.$emit("reload");
              this.$emit("update:visible", false);
            }).catch((e) => {
              this.loading = false;
              this.$message.error(e.toString());
            });
          }
        }
      });
    },
    closeDialog() {
      this.$emit("update:visible", false);
    },
  }
}
</script>

<style scoped>

</style>
